import React from 'react';
import PageTitle from 'component/page-title/PageTitle.jsx';
import MUtil from 'util/MUtil.jsx';
const mUtil = new MUtil();
import OrderService from 'service/OrderService.jsx';
const productService = new OrderService();
import Pagination from 'util/Pagination.jsx';
import TableList from 'util/TableList.jsx';
import { Link } from 'react-router-dom';
import OrderSearch from 'page/order/OrderSearch.jsx';


export default
  class OrderList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [],
      pageNum: 1,
      firstLoading: true,
      listType: 'list', // list  search
      orderNo:''
    };
  }

  /**
   * 加载商品列表
   */
  loadOrderList() {
    let listParam = {};
    listParam.listType = this.state.listType;
    listParam.pageNum = this.state.pageNum;

    // 如果是搜索的话，需要传入搜索类型和搜索关键字
    if (this.state.listType === 'search') {
      listParam.orderNo = this.state.orderNo;
    }
    // 请求接口
    productService
      .getOrderList(listParam)
      .then(res => {
        this.setState(res.data, () => {
          this.setState({
            firstLoad: false
          })
        });
      }, errMsg => {
        this.setState({
          list: []
        });
        mUtil.errorTips(errMsg.msg);
      });
  }

  /**
   * 搜索
   */
  onSearch(orderNumber) {
    console.log(orderNumber);
    let listType = orderNumber === '' ? 'list' : 'search';
    this.setState({
      listType,
      pageNum: 1,
      orderNo: orderNumber,
    }, () => this.loadOrderList());
  }

  componentDidMount() {
    this.loadOrderList();
  }

  onPageNumChange(pageNum) {
    this.setState({ pageNum }, () => this.loadOrderList());
  }

  render() {

    let listBody = this.state.list
      .map((order, index) => {
        return (
          <tr key={index}>
            <td>
              <Link to={`/order/detail/${order.orderNo}`}>
                {order.orderNo}
              </Link>
            </td>
            <td>{order.receiverName}</td>
            <td>{order.statusDesc}</td>
            <td>￥{order.payment}</td>
            <td>{order.createTime}</td>
            <td>
              <Link className="operate" to={`/order/detail/${order.orderNo}`}>详情</Link>
            </td>
          </tr>
        );
      });
    let listError = (
      <tr>
        <td colSpan="5" className="text-center">{this.state.firstLoad ? '正在加载...' : '没有找到相应的结果'}</td>
      </tr>
    );

    let tableBody = this.state.list.length > 0 ? listBody : listError;

    let tableHeads = [
      { name: '订单号', width: '25%' },
      { name: '收件人', width: '20%' },
      { name: '订单状态', width: '15%' },
      { name: '订单总价', width: '15%' },
      { name: '创建时间', width: '15%' },
      { name: '操作', width: '10%' },
    ];
    return (
      <div id="page-wrapper">
        <PageTitle title="商品列表" />
        <OrderSearch onSearch={orderNo => this.onSearch(orderNo)} />
        <TableList tableHeads={tableHeads}>
          {tableBody}
        </TableList>
        <Pagination current={this.state.pageNum}
          total={this.state.total}
          onChange={pageNum => this.onPageNumChange(pageNum)} />
      </div>
    );
  }
}